:root {
	/* color */
	--brand-color: #d65108;
	--primary-bg-color: #ffe6d8;
	--sec-bg-color: #ffede2;
	--ter-bg-color: #fdf7f4;
	--white-color: #fff7f7;
	--primary-text: #191212;
	--secondary-text: #664848;
	--tertiary-text: #cc9191;
	--quaternary-text: #ffd1d1;

	/* font size*/
	--font-h1: 3.2rem;
	--font-h2: 4rem;
	--font-h3: 2rem;
	--font-h4: 1.5rem;
	--font-h5: 1.2rem;
	--font-body: 1.25rem;
	/* --font-body: 1.125rem; */
	--font-button: 1rem;
	--font-pre-title: 0.75rem;
	--font-small: 0.625rem;
	--font-navbar: 0.9rem;

	/* width and height */
	--header-height: 100px;
	--max-width: 1440px;
	--width: 1280px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}
body {
	font-family: 'Josefin Sans', 'Josefin Slab', sans-serif;
	/* background-color: var(--primary-bg-color); */
	/* max-width: var(--max-width); */
	/* margin: 0 auto; */
	color: var(--primary-text);
	/* margin-inline: auto; */
	position: relative;
}

h1 {
	font-size: var(--font-h1);
	line-height: 1.1;
}
h2 {
	font-size: var(--font-h2);
}
h3 {
	font-size: var(--font-h3);
	font-weight: 500;
	text-transform: uppercase;
}
h4 {
	font-size: var(--font-h4);
	font-weight: 500;
	text-transform: capitalize;
	margin-bottom: 1.4rem;
}
h5 {
	font-size: var(--font-h5);
}
h4 {
	font-size: var(--font-h4);
}
p {
	font-size: var(--font-body);
	letter-spacing: 1.2px;
	line-height: 1.4;
	text-align: justify;
}
small {
	font-size: var(--font-small);
	letter-spacing: 0.8px;
}
a {
	text-decoration: none;
	color: var(--primary-text);
}
img {
	width: 100%;
	height: auto;
	display: block;
	/* mix-blend-mode: luminosity; */
}

/*********************
----- Utilities ------
**********************/
.btn {
	/* width: min(50% - 1rem, 100%); */
	padding-inline: 2em;
	padding-block: 1em;
	background-color: var(--brand-color);
	/* border-radius: 0.5rem; */
	font-size: var(--font-button);
	letter-spacing: 1.4px;
	text-transform: uppercase;
	cursor: pointer;
	z-index: 1;
	transition: background-color 0.25s ease-in-out;
}
button {
	border: 1px solid transparent;
	color: var(--ter-bg-color);
	font-family: 'Josefin Sans', 'Josefin Slab', sans-serif;
}

.btn-clr {
	background-color: var(--primary-bg-color);
}

.btn:hover,
.btn:focus {
	/* background-color: hsl(var(--tertiary-text), 0.5); */
	/* background-color: hsla(0, 100%, 91%, 0.9); */
	/* background-color: hsla(var(--brand-color)/0.5); */
	border: 1px solid var(--brand-color);
	background-color: transparent;
	color: var(--brand-color);
}

.flex {
	display: flex;
}

.max-width {
	/* max-width: var(--max-width); */
	width: min(100% - 2rem, var(--max-width));
	margin-inline: auto;
}

/******************
----- Header ------
********************/

.navbar-container {
	padding-block: 2rem;
	background-color: var(--primary-bg-color);
}

.navbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.navbar img {
	max-width: 8rem;
}

nav {
	font-size: var(--font-navbar);
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

nav ul li a {
	padding: 0.3rem;
	margin-inline: 0.5rem;
	border-bottom: 4px solid transparent;
}

nav ul li a:last-child {
	margin-right: 0;
}

nav ul li a:hover {
	border-bottom: #d65108 4px solid;
}
/* Hero */

.hero-container {
	max-width: var(--max-width);
	margin-inline: auto;

	height: 80vh;
	overflow: hidden;
	position: relative;
}

.hero-section {
	display: grid;
	grid-template-columns: 1fr 1fr;
	justify-content: center;
	align-items: center;
	height: 100%;
	gap: 2rem;
}

.hero-content {
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding-inline: 1rem;
}

.hero-content h1 {
	/* margin-bottom: 2rem; */
	font-size: clamp(2.25rem, 0.20000000000000018rem + 6.406249999999999vw, 4.3rem);
}

.hero-content p {
	padding-right: 10%;
	padding-top: 1rem;
}

.hero-content a {
	color: var(--ter-bg-color);
	border: 1px solid transparent;
	align-self: center;
	margin-right: auto;
}

.design-section {
	position: absolute;
}

.circle-design {
	/* max-width: var(--max-width); */
	/* width: min(100%, 100%); */
	width: 100%;
	height: 80vh;
	position: absolute;
	overflow: hidden;
}

.hero-images {
	/* object-fit: cover;
	background-image: url('../images/pexels-pnw-production-8490075.jpg');
	background-repeat: no-repeat;
	background-size: cover; */
	width: 100%;
	height: 100%;
	/* position: relative; */
	padding-block: 4rem;

	display: grid;
	grid-template-columns: repeat(4, auto);
	grid-template-rows: repeat(2, auto);
	gap: 2rem;
}

.image-one,
.image-two {
	/* overflow: hidden; */
	border-radius: 1rem;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	z-index: 1;
}

.image-one {
	background-image: url('../images/pexels-pixabay-270557.jpg');
	grid-column: 2 / -1;
}
.image-two {
	background-image: url('../images/pexels-moose-photos-1586973.jpg');
	grid-column: 1 / 4;
}

.svg-one,
.svg-two,
.svg-three {
	/* height: 10rem;
	width: 10rem; */
	border-radius: 50%;
	/* background-color: var(--brand-color); */

	position: absolute;
}

.svg-one {
	/* background-image: url(../images/logo.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center; */
	bottom: -5%;
	left: 25%;
	height: 24rem;
	width: 24rem;
	background-color: #ffb181;
}

.svg-two {
	right: -5%;
	top: 40%;
	width: 18rem;
	height: 18rem;
	background-color: #ffceaf;
}

.svg-three {
	background-color: #ff8f49;
	height: 14rem;
	width: 14rem;
	top: -5%;
}

/******************
----- Main ------
********************/
main section {
	padding-block: 10rem;
}

main section h3 {
	margin-bottom: 2rem;
}
/* About */
.about-container {
	background-color: var(--ter-bg-color);
	z-index: 1;
}
.column-container {
	column-count: 2;
	column-gap: 4rem;
}

.column-container p {
	text-indent: 2rem;
	margin-bottom: 1rem;
}

.p-link {
	color: var(--brand-color);
}

.column-container a.p-link:focus .column-container a.p-link:hover {
	/* color: var(--brand-color); */
	outline: var(--brand-color);
	color: #191212;
}

.founder {
	padding-top: 8rem;
}

/* Services */
.services-container {
	background-color: var(--sec-bg-color);
}

.services {
	padding: 4rem 2rem 0rem 2rem;

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 4rem;
}

.services article svg {
	width: 30%;
	color: var(--brand-color);
}
.service-content {
	display: flex;
	flex-direction: column;
}

.services article {
	border: 1px solid coral;
	/* border-radius: 8px; */
	padding: 2rem 2rem 4rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 4rem;
}

/* Contact */

dialog {
	top: 50%;
	left: 50%;
	padding: 4rem;
	border: 2px solid var(--brand-color);

	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.modal::backdrop {
	background: rgb(0 0 0 / 0.4);
}

.contact-locations-container {
	background-color: var(--ter-bg-color);
}

.contact-locations {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 8rem;
}

.locations,
.contact {
	width: 100%;
	justify-self: center;
}

.location-container,
form {
	padding-top: 4rem;
}

.location-container {
	display: flex;
	gap: 4rem;
	padding-left: 2rem;
}

.location {
	text-align: center;
	padding-bottom: 2rem;
}

.location h5 {
	padding-bottom: 0.1rem;
	border-bottom: 2px solid var(--brand-color);
	margin-bottom: 1rem;
}

/* Form */

form {
	width: min(100% - 2rem, 100%);
	display: flex;
	flex-direction: column;
	/* align-items: center; */
	gap: 3rem;
}
label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: var(--font-button);
	text-transform: capitalize;
}
input,
textarea {
	width: 100%;
	padding: 0.8rem 0.4rem;
	border: 1px solid transparent;
	font-size: var(--font-button);
	font-family: 'Josefin Sans', 'Josefin Slab', sans-serif;
	transition: all ease-out 0.2s;
}
textarea {
	text-align: justify;
}

form input:hover,
form input:focus,
form textarea:hover,
form textarea:focus {
	border: 1px solid var(--brand-color);
}

/******************
----- Footer ------
********************/
footer {
	background-color: var(--primary-bg-color);
}

.footer-logo {
	width: 20%;
	margin-inline: auto;
	padding-block-start: 4rem;
	padding-block-end: 1rem;
	border-bottom: 2px solid var(--brand-color);
}

.footer-content {
	margin-block: 4rem;
	display: grid;
	/* grid-template-columns: repeat(2, 1fr); */
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	justify-items: center;

	gap: 2rem;
}

.footer-services ul {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	text-transform: capitalize;
}

.contact-detail {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.contact-detail-phone,
.contact-detail-email {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.contact-detail-email {
	align-self: baseline;
}

.contact-detail-email .emails {
	height: 3.5rem;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: start;
	gap: 0.4rem;
}

.footer .copyright {
	text-align: center;
	padding: 1rem;
	text-transform: uppercase;
	font-weight: 600;
}

.scroll-top {
	background-color: rgba(0, 0, 0, 0.5);
	padding: 1em 2em;
	position: fixed;
	top: auto;
	bottom: 2rem;
	right: 2rem;
	border-radius: 8px;

	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.2rem;
	z-index: 2;
}

.scroll-top svg {
	color: var(--sec-bg-color);
}

.scroll-top p {
	color: var(--ter-bg-color);
}

/******************
----- Media Query ------
********************/

@media screen and (max-width: 991px) {
	.hero-container {
		/* padding-top: 10%; */
		height: 90vh;
		overflow: hidden;
	}
	.circle-design {
		height: 90vh;
	}

	.hero-section {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.hero-content {
		width: min(100% - 2rem, 100%);
		text-align: center;
		margin-inline: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2rem;
	}

	.hero-content h1 {
		/* margin-bottom: 4rem; */
		/* font-size: clamp(2rem, -0.15625rem + 7.187499999999999vw, 4.3rem); */
		font-size: clamp(2.25rem, 0.20000000000000018rem + 6.406249999999999vw, 4.3rem);
		width: min(80% - 4rem);
	}

	.hero-content p {
		padding-right: 0rem;
		padding-inline: 4rem;
		max-width: 100%;
	}

	.hero-content a {
		margin-right: 0;
	}

	.hero-images {
		background-image: none;
		display: block;
	}
	.image-one,
	.image-two {
		background-image: none;
	}

	.svg-two {
		top: -10rem;
		right: 0;
	}

	.svg-one {
		left: 0;
	}
}

@media screen and (max-width: 768px) {
	.hero-container {
		overflow: hidden;
		padding-inline: 0;
	}
	.navbar {
		flex-direction: column;
		gap: 2rem;
	}
	.circle-design {
		overflow: hidden;
		height: 90vh;
	}
	.hero-content {
		width: min(100% - 2rem);
	}

	.hero-content p {
		padding-inline: 0;
	}

	.svg-one {
		left: -1rem;
	}

	form {
		/* width: 80%; */
		margin-inline: auto;
	}

	.column-container {
		column-count: 1;
		column-gap: 0rem;
		padding-inline: 1rem;
	}

	.footer-content {
		justify-items: baseline;
		padding-inline-start: 2rem;
	}
}